<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<body>
<div class="product_nav" style="display: ${isDisplay ? "block":"none"}">
    <div class="product_nav_breadcrumb">
        当前路径：<p id="categoryId" style="display: none;">${clickCategory.id}</p>
        <span class="layui-breadcrumb">
                              <a id="breadcrumb_1">${clickCategory.parentPojo.categoryName}</a>
                              <a><cite id="breadcrumb_2">${clickCategory.categoryName}</cite></a>
                        </span>
    </div>
    <div class="product_nav_search">
        <p>筛选：</p>
        <label class="product_nav_search_div">
            价格
            <input id="min_price" class="layui-input" type="text" title="" placeholder="最低"
                   value="${productCondition.minPrice}">
            &nbsp;&nbsp;-
            <input id="max_price" class="layui-input" type="text" title="" placeholder="最高"
                   value="${productCondition.maxPrice}">
        </label>
        <div class="layui-inline product_nav_search_div" style="width: 30%">
            <label class="layui-form-label" style="padding: 0;">日期范围</label>
            <div class="layui-input-inline" style="width: 50%;">
                <input type="text" class="layui-input" id="releaseTime_range"
                       value="${productCondition.releaseTimeRange}"
                       style="height: 80%;    margin-top: -0.4%;margin-left: 14px"
                       placeholder="发布时间范围" title="">
            </div>
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="product_search()">确定</button>
    </div>
</div>
<div class="product_body" id="product_body" style="margin-top: ${isDisplay ? "0":"24px"}">
    <c:if test="${products.size() == 0}">
        <div style="width: 100%;margin-top: 12px;text-align: center;">
            <img src="static/img/noData.svg" style="width: 120px;height: 120px;"/>
            <p style="line-height: 24px;margin-top:20px;color: #2E2D3C;font-size: 20px;"> 该商品暂时没有用户发布！</p>
        </div>
    </c:if>
    <c:forEach items="${products}" var="product">
        <div class="product_item" onclick="product_detail('${product.id}')">
            <img src="${product.img}" alt="">
            <p style="color:red;font-size: 13px;">${product.price}</p>
            <p>${product.name}</p>
            <div style="display: flex">
                <p style="display: block;width: 65%">${product.stringReleaseTime}</p>
                <p style="display: block;width: 35%;color:#fff9ec;font-size: 10px; padding: 1px;
                        background:${product.releaseUserPojo.id.equals(sessionScope.user.id) ? "mediumseagreen" : "deepskyblue"};text-align: center">
                        ${product.releaseUserPojo.id.equals(sessionScope.user.id) ? "我的" : product.releaseUserPojo.realName}
                </p>
            </div>
        </div>
    </c:forEach>
</div>
<div class="product_page" id="productPage"></div>
<script>
    let curPage = ${curPage};
    let categoryId = '${clickCategory.id}';

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#releaseTime_range'
            , range: true
        });
    });

    layui.use('laypage', function () {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'productPage' //注意，这里的 test1 是 ID，不用加 # 号
            , count: ${products_num} //数据总数，从服务端得到
            , limit: 16
            , curr: curPage //获取起始页
            , jump: function (obj, first) {
                //首次不执行
                let minPrice = $("#min_price").val();
                let maxPrice = $("#max_price").val();
                let searchContent = $("#search_input").val();
                minPrice = parseFloat(minPrice);
                maxPrice = parseFloat(maxPrice);
                let releaseTimeRange = $("#releaseTime_range").val();
                if (!first) {
                    sendJsonParam(categoryId, obj.curr, minPrice, maxPrice, searchContent, releaseTimeRange, ${isDisplay});
                }
            }
        });
    });
</script>
</body>
</html>
